<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/scripts/jquery.js" type="text/javascript"></script>
    <script src="/scripts/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="/scripts/dataTables.semanticui.min.js" type="text/javascript"></script>
    <script src="/scripts/semantic.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="${base}/themes/semantic.min.css">
    <link rel="stylesheet" href="/themes/dataTables.semanticui.min.css">
    <title>留言</title>
    <style type="text/css">
        #main-content {
            min-height: 900px;
        }
    </style>

</head>
<body>
<div class="ui inverted attachted top stackable menu">
    <div href="" class="item" style="margin-left: 150px;">我的博客</div>
    <div class="header active item">
        <a href="/">首页</a>
    </div>
    <a href="/message/list" class="item">留言</a>
    <div class="item">
        <div class="ui icon mini input">
            <i class="search icon"></i>
            <input type="text" name="searchtext" placeholder="查找...">
        </div>
    </div>
    <div class="right menu">
    <#if (session.user)??>
        <a class="item"><i class="user icon"></i>${(session.user.nickname)!''}</a>
        <a href="/logout" class="item">退出登录</a>
    <#else>
        <a href="/login" class="item">登录</a>
        <a href="/reg" class="item">注册</a>
    </#if>
    </div>
</div>

<div class="ui grid container" id="main-content">
    <div class="sixteen wide column">
        <div class="ui segment">
            <table class="ui celled striped table" id="message-table">
                <thead>
                <tr>
                    <th class="one wide">序号</th>
                    <th class="two wide">用户</th>
                    <th class="three wide">标题</th>
                    <th class="four wide">内容</th>
                    <th class="three wide">发表时间</th>
                    <th class="three wide">操作</th>
                </tr>
                </thead>
                <tbody>
                <#--<#if messages??>-->
                    <#--<#list messages as message>-->
                    <#--<tr>-->
                        <#--<td>${message.id}</td>-->
                        <#--<td>${message.nickname}</td>-->
                        <#--<td>${message.title}</td>-->
                        <#--<td>${message.content?right_pad(20)?substring(0,20)!""}</td>-->
                        <#--<td>${message.pubdate}</td>-->
                        <#--<td>-->
                            <#--<#if (session.user)?? && session.user.id == message.user_id>-->
                                <#--<a class="ui red icon delete button" data-id="${message.id}">-->
                                    <#--<i class="delete icon"></i>删除-->
                                <#--</a>-->
                            <#--</#if>-->
                        <#--</td>-->
                    <#--</tr>-->
                    <#--</#list>-->
                <#--</#if>-->
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 删除留言确认对话框 -->
<div class="ui small modal" id="delete-dialog">
    <div class="header">
        删除留言
    </div>
    <div class="content">
        确定要删除该条留言吗？
    </div>
    <div class="actions">
        <a class="ui approve blue button">确定</a>
        <a class="ui cancel red button">取消</a>
    </div>
</div>
<!-- 删除留言确认对话框结束 -->

<!-- 编辑留言对话框 -->
<div class="ui small modal" id="edit-dialog">
    <div class="header">
        编辑留言
    </div>
    <div class="content">
        <form class="ui fluid form" id="edit-form">
            <div class="field">
                <label for="title">标题</label>
                <input type="text" id="title" name="message.title" placeholder="请输入标题" autocomplete="off">
            </div>
            <div class="field">
                <label for="content">内容</label>
                <textarea id="content" name="message.content" rows="5"></textarea>
            </div>
            <input type="hidden" id="mid" name="message.id">
        </form>
    </div>
    <div class="actions">
        <a class="ui approve blue button">确定</a>
        <a class="ui cancel red button">取消</a>
    </div>
</div>
<!-- 编辑留言对话框结束 -->

<div class="ui vertical inverted footer segment">
    <div class="ui center aligned text container">
        宁夏大学信息工程学院 版权所有 2017－2020
    </div>
</div>

</body>

<script>
    $(document).ready(function () {

        var userId = ${(session.user.id)!"-1"};
        var dt = $("#message-table").DataTable({
            serverSide: true,
            filter: false,
            order: false,
            ajax: {
                url: "/message/json",
                method: "GET",
                dataSrc: "data",
                data: function (req) {
                    delete req.columns;
                    delete req.search;
                }
            },
            columns: [
                {"data": "id", target: 0},
                {"data": "nickname", target: 1},
                {"data": "title", target: 2},
                {"data": "content", target: 3},
                {"data": "pubdate", target: 4},
                {
                    "data": "user_id", target: 5,
                    render: function (value) {
                        if (userId == value)
                            return "<a class='ui blue icon edit button'><i class='edit icon'></i>编辑</a><a class='ui red icon delete button'><i class='delete icon'></i>删除</a>";
                        else
                            return "";
                    }
                }
            ]
        });

        function deleteMessage(id) {
            $.ajax({
                url: "/message/delete/" + id,
                type: "POST",
                success: function (response) {
                    if (response.success) {
                        dt.ajax.reload();
                    } else {
                        alert(response.message);
                    }
                },
                error: function () {
                    alert("删除失败!");
                }
            });
        }

        $("#message-table tbody").on("click", ".delete",
                function () {
                    var message = dt.row($(this).parents("tr")).data();
                    $("#delete-dialog").modal({
                        closeable: false,
                        onApprove: function () {
                            deleteMessage(message.id, message.user_id);
                        }
                    }).modal("show");
                }
        );

        function updateMessage() {
            $.ajax({
                url: "/message/update/",
                type: "POST",
                data: $("#edit-form").serialize(),
                success: function (response) {
                    if (response.success) {
                        dt.ajax.reload();
                    } else {
                        alert(response.message);
                    }
                },
                error: function () {
                    alert("编辑失败!");
                }
            });
        }

        $("#message-table tbody").on("click", ".edit",
                function () {
                    var message = dt.row($(this).parents("tr")).data();
                    $("#title").val(message.title);
                    $("#content").html(message.content);
                    $("#mid").val(message.id);
                    $("#edit-dialog").modal({
                        closeable: false,
                        onApprove: function () {
                            updateMessage();
                        }
                    }).modal("show");
                }
        );

    });
    //    $(document).click(function (e) {
    //        var messageId = $(e.target).attr('data-id');
    //        if (messageId != null) {
    //            $.ajax({
    //                url: "/message/delete",
    //                type: "POST",
    //                data: {messageId: messageId},
    //                success: function (data) {
    //                    window.location.href = "/message/list";
    //                }
    //            });
    //        }
    //    });
</script>

</html>